<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: 0px;
            top: 0px;
            opacity: 1;
        }


        p {
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 350px;
        }
    </style>
</head>

<body>
    <div></div>


    <p></p>
    <script>
       // 所有的定时器全部结束了 然后做一件事情  

        function move3(ele, obj, timer,fn) {
            let count = 0;
            for (let k in obj) {
                count++;
                const type = k;
                let target = obj[k];
                // 判断是否是opacity  //如果是 目标值 乘以100 
                if (type === 'opacity') target *= 100;
                const t = setInterval(function () {
                    let current;
                    if (type === 'opacity') {
                        current = window.getComputedStyle(ele)[type] * 100;
                    } else {
                        current = parseInt(window.getComputedStyle(ele)[type]);

                    }
                    // 实时获取 最新的样式值 

                    // 计算运动距离 
                    let duration = (target - current) / 10;

                    duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
                    console.log(duration);
                    if (current === target) {
                        clearInterval(t);
                        count--;
                        if(count === 0){

                            console.log('定时器全部结束了');
                            fn();
                        }
                        // console.log(`第${t}个定时器结束`);
                    }
                    else {
                        if (type === 'opacity') {
                            ele.style[type] = (current + duration) / 100;
                        } else {
                            ele.style[type] = current + duration + 'px';
                        }
                    }

                }, timer)
            }
        }
        function do_daifan(){
            console.log('帮我带一个小炒肉盖浇饭');
        }
        // 像这种  等到 一个信号函数才执行  这种属于回调函数(函数中调用函数)
        var divele = document.querySelector('div');
        divele.onclick = function () {
            move3(divele, {left:500,width:300,opacity:0.34}, 20,do_daifan);

        }



    </script>
</body>

</html>